import React, { Component } from "react";
import './start.css'
class start extends Component{
    constructor(props){
        super(props)
        this.state = {
            msg:"<sh-input></sh-input>"
        }
    }
    render(){
        return(
         <div className='start'>
            <div className="content_title mt-20">
                <div className="title_text" style={{fontSize:'24px'}}>快速上手</div>
            </div>
            <div className="little_text mt-20">
                 安装 / 下载
            </div>
            <div className="text mt-20">
                暂时仅支持 npm 下载 仅支持 Vue 框架
            </div>
            <pre className='code mt-20'>
                <code ><ol>
                        <li> <span></span> npm install songhan-ui --save</li>
                   
                    </ol></code>
            </pre>
            <div className="little_text mt-20">
                引入
            </div>
            <div className="text mt-20">
               使用前先引入css 否则会出现样式不生效的问题
            </div>
            <pre className='code mt-20'>
                <code ><ol>
                        <li> <span className='import'> import</span> <span className='from'> "songhan-ui/src/assets/css/icon.css"; </span></li>
                   
                    </ol></code>
            </pre>
            <div className="little_text mt-20">
                使用
            </div>
            <div className="text mt-20">
               暂时仅支持全部引入
            </div>
            <pre className='code mt-20'>
                <code ><ol>
                        <li>  <span className='from'>main.js</span> </li>
                        
                        <li> <span className='import'> import</span> <span>Vue</span> <span className='import'>from</span><span className='from'> "Vue"; </span></li>
                        <li> <span className='import'> import</span> <span>SonghanUI</span> <span className='import'>from</span><span className='from'> "songhan-ui"; </span></li>
                        <li> <span className='import'> import</span> <span className='from'>"songhan-ui/src/assets/css/icon.css"; </span></li>
                        <li> <span > Vue.</span><span className='from'>use(</span><span>SonghanUI</span><span className='from'>)</span> </li>
                        <li>  </li>
                        <li>  <span className='from'>songhanUI.vue</span> </li>
                        <li>  <span className='import'>{this.state.msg}</span> </li>
                    </ol></code>
            </pre>
        </div>
        )
    }
}
export default start